<!-- eslint-disable prettier/prettier -->
<!-- eslint-disable prettier/prettier -->
<!-- eslint-disable vue/attribute-hyphenation -->
<template>
    <div>
        <s-table ref="table" tree :search-params="searchParams" :columns="columnsAction" :async-fc="page">
            <template #tableHeader>
                <t-button @click="insert">新增信息</t-button>
                <t-button theme="warning" @click="onDelete">删除</t-button>
            </template>
        </s-table>
        <t-dialog v-model:visible="modalOpen" width="50%" @confirm="onModalSubmit">
            <t-form ref="submitFormRef" :rules="rules" :data="submitForm" labelAlign="top">
                <!-- 16——横向间距  24——纵向间距 -->
                <t-row style="width: 100%" :gutter="[16, 24]">
                    <t-col :span="6">
                        <t-form-item :label="t('pages.sysPermission.type')" name="type">
                            <t-select
                                v-model="submitForm.type"
                                :options="typeOptions"
                                :placeholder="t('pages.sysPermission.typePlaceholder')"
                                @change="chooseType"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col v-if="submitForm.type !== 2" :span="6">
                        <t-form-item :label="t('pages.sysPermission.path')" name="path">
                            <t-input
                                v-model="submitForm.path"
                                :placeholder="t('pages.sysPermission.typePlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col v-if="submitForm.type == 1 || submitForm.type == 2" :span="6">
                        <t-form-item :label="t('pages.sysPermission.parentId')" name="parentId">
                            <t-select
                                v-model="submitForm.parentId"
                                :options="parentOptions"
                                :placeholder="t('pages.sysPermission.parentIdPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="6">
                        <t-form-item :label="t('pages.sysPermission.name')" name="name">
                            <t-input
                                v-model="submitForm.name"
                                :placeholder="t('pages.sysPermission.namePlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="6">
                        <t-form-item :label="t('pages.sysPermission.englishName')" name="englishName">
                            <t-input
                                v-model="submitForm.englishName"
                                :placeholder="t('pages.sysPermission.englishNamePlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col v-if="submitForm.type != 0" :span="6">
                        <t-form-item :label="t('pages.sysPermission.code')" name="code">
                            <t-input
                                v-model="submitForm.code"
                                :placeholder="t('pages.sysPermission.codePlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col v-if="submitForm.type !== 2" :span="6">
                        <t-form-item :label="t('pages.sysPermission.outerChain')" name="outerChain">
                            <t-radio-group
                                v-model="submitForm.outerChain"
                                :options="yesNoOptions"
                                :placeholder="t('pages.sysPermission.outerChainPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col v-if="submitForm.type !== 2" :span="6">
                        <t-form-item :label="t('pages.sysPermission.icon')" name="icon">
                            <t-select v-model="submitForm.icon">
                                <t-option
                                    v-for="item in iconOptions"
                                    :key="item.stem"
                                    :value="item.stem"
                                    style="display: inline-block; font-size: 25px"
                                >
                                    <div>
                                        <t-icon :name="item.stem" />
                                    </div>
                                </t-option>
                                <template #valueDisplay
                                    ><t-icon :name="submitForm.icon" :style="{ marginRight: '8px' }" />{{
                                        submitForm.icon || t('pages.sysPermission.iconPlaceholder')
                                    }}</template
                                >
                            </t-select>
                        </t-form-item>
                    </t-col>
                    <t-col :span="6">
                        <t-form-item :label="t('pages.sysPermission.sort')" name="sort">
                            <t-input-number
                                v-model="submitForm.sort"
                                theme="column"
                                :placeholder="t('pages.sysPermission.sortPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                </t-row>
            </t-form>
        </t-dialog>
    </div>
</template>
<script setup lang="ts">
/** ***                                          引用部分开始                                          */
import { manifest } from 'tdesign-icons-vue-next';
import type { FormInstanceFunctions } from 'tdesign-vue-next';
import { DialogPlugin, Link, MessagePlugin, Space } from 'tdesign-vue-next';
import { ref } from 'vue';

import { deleteById, insertApi, page, updateApi } from '@/api/sysPermission';
import STable from '@/components/s-table/index.vue';
import { t } from '@/locales';

import { columns, rules, searchParams, typeOptions, yesNoOptions } from './props';
/** ***                                          引用部分结束                                          */
const iconOptions = ref(manifest);

/** ***                                          属性定义部分开始                                          */
const submitForm = ref({});
const modalOpen = ref(false);
const submitFormRef = ref<FormInstanceFunctions>(null);
const table = ref<STableInstanceFunction>(null);
const parentOptions = ref([]);
/** ***                                          属性定义部分结束                                          */

const columnsAction = columns.concat([
    {
        align: 'left',
        fixed: 'right',
        colKey: 'op',
        title: t('components.commonTable.operation'),
        cell: (h, { row }) =>
            h(Space, {}, [
                h(
                    Link,
                    {
                        theme: 'primary',
                        onClick: async () => {
                            if (row.type == 1) {
                                await chooseType(1);
                            } else if (row.type == 2) {
                                await chooseType(2);
                            }
                            submitForm.value = row;
                            modalOpen.value = true;
                        },
                    },
                    '修改',
                ),
                h(
                    Link,
                    {
                        theme: 'danger',
                        onClick: () => {
                            const confirmDialog = DialogPlugin.confirm({
                                header: `提示`,
                                body: `删除后，标记为${row.id}的所有信息将被清空，且无法恢复`,
                                confirmBtn: {
                                    content: '提交',
                                    theme: 'primary',
                                    loading: false,
                                },
                                theme: 'warning',
                                onConfirm: async () => {
                                    confirmDialog.update({ confirmBtn: { content: '提交中', loading: true } });
                                    await deleteById(row.id);
                                    MessagePlugin.success('删除成功！');
                                    table.value.onSearch();
                                    confirmDialog.update({ confirmBtn: { content: '提交', loading: false } });
                                    confirmDialog.hide();
                                },
                            });
                        },
                    },
                    '删除',
                ),
            ]),
    },
]);

/** ***                                          页面方法开始                                          */
const insert = () => {
    modalOpen.value = true;
    submitForm.value = {
        outerChain: 0,
    };
};

const onDelete = async () => {
    console.log('勾选值', table.value.getSelectedKeys());
};

/**
 * 提交表单
 */
const onModalSubmit = async () => {
    const valid = await submitFormRef.value.validate();
    if (valid === true) {
        if (submitForm.value.id) {
            await updateApi(submitForm.value);
        } else {
            await insertApi(submitForm.value);
        }
        MessagePlugin.success('操作成功！');
        modalOpen.value = false;
        table.value.onSearch();
    }
};

const chooseType = async (value) => {
    if (value == 1) {
        /** 拉取护局 */
        const { records } = await page({ currentPage: 1, pageSize: 99, params: { type: 0 } });
        parentOptions.value = records.map((i) => ({ label: i.name, value: i.id }));
    } else if (value == 2) {
        /** 拉取护局 */
        const { records } = await page({ currentPage: 1, pageSize: 99, params: { type: 1 } });
        parentOptions.value = records.map((i) => ({ label: i.name, value: i.id }));
    }
};
/** ***                                          页面方法结束                                          */
</script>
